<template>
	<view id="page_content">
		<tui-tips ref="toast" v-if="index==0"></tui-tips>
		<tui-drawer mode="right" :visible="isopen">
			<headNav @close="closeOpen" @showTips="showTips"></headNav>
		</tui-drawer>
		<view class="page affiliate_dashboard_page affiliate_page">
			<view class="page_header">

				<view class="header_center">
					<topWallet :connect="hasToken" @onOpen="openModel"></topWallet>

					<view class="golden-title"><text>我的订单</text></view>
				</view><button class="menu_btn" @click="navs('showLeft')">
					<image src="/static/images/common/menu.svg" mode="widthFix">
				</button>
			</view>

			<navigator url="/share_links" @click="showDialog">
				<view class="add_link_btn">{{$t('Generate-Link')}}</view>
			</navigator>
			<view class="bottom">
		<!-- 		<view class="tui-order-header">
					<view class="view-content">
						<view>
							<view class="tui-status-text">{{getStatusText(status)}}</view>
							<view class="tui-reason"><text class="tui-reason-text">{{getReason(status)}}</text>
								<tui-countdown :time="1800" color="rgba(254,254,254,0.75)" colonColor="rgba(254,254,254,0.75)" borderColor="transparent"
								 backgroundColor="transparent" v-if="status===1"></tui-countdown>
							</view>
						</view>
						<image :src="getImg(status)" class="tui-status-img" mode="widthFix"></image>
					</view>
				</view> -->
				<tui-list-cell arrow backgroundColor="#fefefe" @click="logistics" v-if="deliveryData" class="tui-boxs">
					<view class="tui-flex-box">
						<!-- <image :src="'/static/images/common/trd.png'" class="tui-icon-img"></image> -->
						<view class="tui-logistics">
							<view class="tui-logistics-text">{{deliveryData['delivery_name']}}</view>
							<view class="tui-logistics-time">{{deliveryData['delivery_id']}}</view>
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell unlined :hover="false" class="tui-boxs">
					<view class="tui-flex-box">
						<!-- <image :src="'/static/images/common/wl.png'" class="tui-icon-img"></image> -->
						<view class="tui-addr">
							<view class="tui-addr-userinfo">{{orderinfo.receiver_name}}<text class="tui-addr-tel">{{orderinfo.receiver_mobile}}</text></view>
							<view class="tui-addr-text">{{orderinfo.receiver_address}}</view>
						</view>
						
					</view>
				</tui-list-cell>
				
				<view class="tui-order-item">
					<tui-list-cell :hover="false" :lineLeft="false" class="tui-boxs">
						<view class="tui-goods-title">
							商品信息
						</view>
					</tui-list-cell>
					<block v-for="(item,index) in orderinfo.order_goods_list" :key="index">
						<tui-list-cell padding="0" class="tui-boxs">
							<view class="tui-goods-item">
								<image :src="item.picture.pic_cover_small" class="tui-goods-img"></image>
								<view class="tui-goods-center">
									<view class="tui-goods-name">{{item.goods_name}}</view>
									<view class="tui-goods-attr">{{item.sku_name}}</view>
								</view>
								<view class="tui-price-right">
									<view>{{item.price}}</view>
									<view>x{{item.num}}</view>
									<view class="yui-order-refund"
										v-if="item.refund_status==0 && item.order_status>0 && item.order_status<3"
										@click="refunds(item.order_goods_id)">申请退款</view>
									<view class="yui-order-now-refund" v-if="item.refund_status==1">退款中</view>
									<view class="yui-order-now-refund" v-if="item.refund_status==4" @click="cancelOrder(item.order_goods_id)">取消退款</view>
									<view class="yui-order-now-refund" v-if="item.refund_status==-3">退款不通过</view>
									<view class="yui-order-now-refund" v-if="item.refund_status==5">已退款成功</view>
								</view>
							</view>
						</tui-list-cell>
					</block>
					<view class="tui-goods-info">
						<view class="tui-price-flex tui-size24">
							<view>商品总额</view>
							<view>{{orderinfo.pay_money}}</view>
						</view>
				<!-- 		<view class="tui-price-flex  tui-size24">
							<view>优惠券</view>
							<view>￥0.00</view>
						</view> -->
						<view class="tui-price-flex  tui-size24">
							<view>配送费</view>
							<view>{{orderinfo.shipping_money}}</view>
						</view>
						<view class="tui-price-flex tui-size32 tui-pbtm20">
							<view class="tui-flex-shrink">合计</view>
							<view class="tui-goods-price">
								<view class="tui-size-24"></view>
								<view class="tui-price-large">{{orderinfo.pay_money}}</view>
								<!-- <view class="tui-size-24">.00</view> -->
							</view>
						</view>
						<view class="tui-price-flex tui-size32">
							<view class="tui-flex-shrink">实付款</view>
							<view class="tui-goods-price tui-primary-color">
								<view class="tui-size-24"></view>
								<view class="tui-price-large">{{orderinfo.pay_money}}</view>
								<!-- <view class="tui-size-24">.00</view> -->
							</view>
						</view>
					</view>
				</view>
				
				<view class="tui-order-info">
					<tui-list-cell :hover="false" class="tui-boxs">
						<view class="tui-order-title">
							订单信息
						</view>
					</tui-list-cell>
					<view class="tui-order-content">
						<view class="tui-order-flex">
							<view class="tui-item-title">订单号:</view>
							<view class="tui-item-content">{{orderinfo.order_no}}</view>
						</view>
					
						<view class="tui-order-flex">
							<view class="tui-item-title">创建时间:</view>
							<view class="tui-item-content">{{orderinfo.create_time}}</view>
						</view>
						<view class="tui-order-flex" v-if="status>=1 || status==-1">
							<view class="tui-item-title">付款时间:</view>
							<view class="tui-item-content">{{orderinfo.pay_time}}</view>
						</view>
						<view class="tui-order-flex" v-if="status==2">
							<view class="tui-item-title">发货时间:</view>
							<view class="tui-item-content">{{orderinfo.consign_time}}</view>
						</view>
						<view class="tui-order-flex" v-if="status==3">
							<view class="tui-item-title">收货时间:</view>
							<view class="tui-item-content">{{orderinfo.consign_time}}</view>
						</view>
						<view class="tui-order-flex">
							<view class="tui-item-title">配送方式:</view>
							<view class="tui-item-content">包邮</view>
						</view>
						<view class="tui-order-flex">
							<view class="tui-item-title">订单备注:</view>
							<view class="tui-item-content">{{orderinfo.buyer_message}}</view>
						</view>
						<view class="tui-order-flex" v-if="status==2">
							<view class="tui-item-title">快递公司:</view>
							<view class="tui-item-content" v-if="orderinfo.order_goods_list[0]['express_info']['express_no']">{{orderinfo.order_goods_list[0]['express_info']['express_company']}}</view>
							<view class="tui-item-content" v-else>无需快递</view>
						</view>
						<view class="tui-order-flex" v-if="status==2">
							<view class="tui-item-title">快递单号:</view>
							<view class="tui-item-content" v-if="orderinfo.order_goods_list[0]['express_info']['express_no']">{{orderinfo.order_goods_list[0]['express_info']['express_no']}}</view>
							<view class="tui-item-content" v-else>无需快递</view>
						</view>
					</view>
				</view>
				<view class="tui-safe-area"></view>
				<view class="tui-tabbar tui-order-btn">
					<view class="tui-btn-mr">
						<tui-button type="warning" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" v-if="status==0" @click="deleOrder">删除订单</tui-button>
						<tui-button type="warning" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle"
							@click="showPopup" v-if="status==2">申请退货</tui-button>
					</view>
					
					
					<view class="tui-btn-mr">
						<tui-button type="warning" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="btnPay" v-if="status==0">立即支付</tui-button>
					    <tui-button type="warning" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" v-else-if="status==1">待发货中</tui-button>
						<tui-button type="warning" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="receipt" v-else-if="status==2">确认收货</tui-button>
						<tui-button type="warning" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="evaluate" v-else-if="status==3 && orderinfo.is_evaluate==0">待评价</tui-button>
						<tui-button type="warning" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" v-else-if="status==5">订单已失效</tui-button>
						
				
					</view>
					
					
				</view>
				<tui-modal :show="modal" @click="handleClick" @cancel="hide" content="确定删除订单吗？" color="#333" :size="32" shape="circle"></tui-modal>
				<!--申请退货-->
				<tui-bottom-popup :show="popupShow" @close="hidePopup">
					<view class="tui-popup-box">
						<view class="title">退款理由</view>
						<view class="tui-cells">
							<textarea class="tui-textarea" placeholder="请填写退款原因" maxlength="500" placeholder-class="phcolor"
								v-model="desc" />
							<view class="textarea-counter">{{descNum}}/500</view>
						</view>
						<view class="tui-ptop">
							<tui-button type="orange" shadow height="88rpx" shape="circle" @click="refund">确认提交</tui-button>
						</view>
					</view>
				
				</tui-bottom-popup>  
			</view>
			
		</view>
		<!-- wallet_pop-->
		<walletPop :walletOpen="open_wallet" :walletModelOpen="open_wallet" @closeWallet="closePop"
			@showTips="showTips"></walletPop>
		<tui-tips ref="toast" position="center"></tui-tips>
		<view v-if="showTabbar">
			<tui-tabbar :current="current" @click="tabbarSwitch" backdropFilter :backgroundColor="backgroundColor"
				:tabBar="tabBar" color="#777" selectedColor="#f4d56f"></tui-tabbar>
		</view>

	</view>
</template>

<script>
	import headNav from "@/components/nav/head_nav.vue"
	import topWallet from "@/components/nav/top_wallet.vue"
	import walletPop from "@/components/nav/wallet_pop.vue"
	export default {
		components: {
			headNav,
			topWallet,
			walletPop
		},
		data() {
			return {
				showPurse: false,
				isopen: false,
				showLink: false,
				hasToken: false,
				open_wallet: false,
				teamData: '',
				current: 3,
				isList: '',
				showTabbar: true,
				backgroundColor: '#191c1d',
				status: 0,
				show: false,
				order_id:'',
				orderinfo:'',
				shows: false,
				paytype:'1',
				popupShow: false,
				logistic_list:[],
				desc:"",
				iswx:false,
				descNum:0,
				totalMoney:0,
				modal:false,
				team_balance: 0,
				balance:'',
				numberArr: [],
				pwdArr: ["", "", "", "", "", ""],
				temp: ["", "", "", "", "", ""],
				radius: false,
				paypassword:'',
				deliveryData:'',
				currentTab: 0,
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				scrollTop: 0,
				loading: '',
				loadingType: '',
				orderlist: '',
				index: 0,
				tabBar: [{
						pagePath: '/pages/dashboard/faq',
						text: this.$t('question'),
						iconPath: '/static/images/common/eb2ad3e9f15cd5c45523.svg',
						selectedIconPath: '/static/images/common/faq.png',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_links',
						text: this.$t('Promotion-link'),
						iconPath: '/static/images/common/1c328bea0664621ae940.svg',
						selectedIconPath: '/static/images/common/2ddef14ffefdf0893c68.svg',

						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_report',
						text: this.$t('Income-statement'),
						iconPath: '/static/images/common/27ef8eecf3261b27000a.svg',
						selectedIconPath: '/static/images/common/e71ec10e6a3c2f14b631.svg',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/dashboard',
						text: this.$t('control-panel'),
						iconPath: '/static/images/common/e5eb47a4e075e5a7a1e6.svg',
						selectedIconPath: '/static/images/common/0713c468a0e288a09478.svg',
						verify: true
					}
				],

			};
		},
		onLoad(options) {
			
			if (options) {
				this.hasToken=true
					this.order_id = options.order_id;
					this.init();
				
				
			};
		},
		onShow() {
			
				this.init();
			
		},
		methods: {
			init(){
				let datas={
					order_id: this.order_id,
				};
				let result=this.tui.request('api/order/orderDetails', 'post', datas, 1000, 1, '', 'orderDetails');
				Promise.resolve(result).then((value)=>{
					this.loading = true;
					uni.hideLoading();
				   if(value.code==200){
					   if(value.data){
						   this.orderinfo=value.data;
						   
						   
						   if(value.data.logistic_list.order){
							   this.deliveryData=value.data.logistic_list.order;
							   this.logistic_list=value.data.logistic_list.logistic_list[0]
						   }
						   
						   this.totalMoney=parseFloat(value.data.order_money)
						   this.status=value.data.order_status>=0?value.data.order_status:6;	
						   this.paytype=value.data.payment_type-1;  
					   }
				   }
				})
				let account=this.tui.request('user','post',{token:token},1000,1,'','userAccount');
				Promise.resolve(account).then((value)=>{
				   if(value.code==200){
				   	 this.balance=value.data.balance;
					 this.team_balance = value.data.team_balance;
				   }
				})
			},
			getImg: function(status) {
				return ["/static/images/my/img_order_payment3x.png", "/static/images/my/img_order_send3x.png", "/static/images/my/img_order_received3x.png",
					"/static/images/my/img_order_signed3x.png", "/static/images/my/img_order_closed3x.png","/static/images/my/img_order_send3x.png"
				][status]
			},
			getStatusText: function(status) {
			
				return ["等待您付款", "付款成功", "待收货", "已收货", "订单已完成","交易关闭","退款中"][status]
			},
			getReason: function(status) {
				return ["剩余时间", "等待卖家发货", "当前订单已发货", "当前订单已收货","当前订单已完成","订单已失效或已关闭","当前订单正在退款中"][status]
			},
			getPaytype: function(paytype) {
				return ["微信支付", "支付宝支付", "余额支付"][paytype]
			},
			
			handleClick(e) {
				if(e.index==1){
					let token = this.tui.getToken();
							
					let datas={
						token: token,
						order_id: this.order_id,
					};
					let result=this.tui.request('order','post',datas,1000,1,'','orderClose');
					Promise.resolve(result).then((value)=>{
					   if(value.code==200){
					     this.tui.toast(value.message);
						 let pages = getCurrentPages();
						 let currPage = pages[pages.length - 1]; //当前页面
						 let prevPage = pages[pages.length - 2]; //上一个页面
						 //#ifdef MP-WEIXIN
						   prevPage.onLoad()
						 //#endif
						 uni.navigateTo({
						   url: '/pageschild/myOrder/myOrder'
						 });
					   }else{
					   	 this.tui.toast(value.message);
					   }
					})
				}
				this.hide();
			},
			hide() {
				this.modal = false;
			},
			
			navs() {
				this.isopen = true
				this.showTabbar = false
			},
			openModel() {
				this.open_wallet = true;
			},
			closeOpen() {
				this.isopen = false
				this.showTabbar = true
			},
			goBack() {
				uni.navigateBack()
			},
			connectPurse() {
				this.showPurse = true
			},
			closePurse() {
				this.showPurse = false
			},
			showDialog() {
				this.showLink = true
			},
			closeLink() {
				this.showLink = false
			},
			closePop() {
				this.open_wallet = false;
			},
			showTips: function(msg, type) {

				let options = {
					msg: msg,
					duration: 2000,
					type: type
				};
				this.$refs.toast.showTips(options);
			},

		}
	}
</script>

<style lang="scss">
	@import '../../static/css/defalut.css';
	// page {
	// 	// background-color: #0c0d13;
	// 	color: #fff;
	// 	font-family: "Barlow Semi Condensed", sans-serif;
	// 	// font-size: 1.3vw;
	// 	margin: 0;
	// 	padding: 0;
	// 	overflow: hidden;
	// }
	
		.tui-order-header {
			width: 100%;
			height: 160rpx;
			position: relative;
			background-color: #EB0909;
		}
	
		.tui-img-bg {
			width: 100%;
			height: 160rpx;
		}
	.tui-keyboard-tips {
			width: 100%;
			height: 120rpx;
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			background: #fff;
			position: relative;
			color: #333;
			border: 0;
		}
		.view-content {
			width: 100%;
			height: 160rpx;
			position: absolute;
			z-index: 10;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 70rpx;
			box-sizing: border-box;
		}
	
		.tui-status-text {
			font-size: 34rpx;
			line-height: 34rpx;
			color: #FEFEFE;
		}
	    /*底部选择弹层*/
	
		.tui-popup-class {
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;
			padding-bottom: env(safe-area-inset-bottom);
		}
	
		.tui-popup-box {
			position: relative;
			padding: 30rpx 50rpx 100rpx 50rpx;
		}
		.title {
		  font-size: 30rpx;
		  color: #666;
		  padding-bottom: 32rpx;
		}
		.tui-ptop{
			margin-top: 40rpx;
		}
		.tui-cells {
		  border: 1rpx solid #e6e6e6;
		  border-radius: 4rpx;
		  height: 280rpx;
		  box-sizing: border-box;
		  padding: 20rpx 20rpx 0 20rpx;
		}
	.tui-textarea {
	  height: 210rpx;
	  width: 100%;
	  color: #666;
	  font-size: 28rpx;
	}
	.textarea-counter {
	  font-size: 24rpx;
	  color: #999;
	  text-align: right;
	  height: 40rpx;
	  line-height: 40rpx;
	  padding-top: 4rpx;
	}
		.tui-popup-btn {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
		}
		.tui-reason {
			font-size: 24rpx;
			line-height: 24rpx;
			color: rgba(254, 254, 254, 0.75);
			padding-top: 15rpx;
			display: flex;
			align-items: center;
		}
	
		.tui-reason-text {
			padding-right: 12rpx;
		}
	
		.tui-status-img {
			width: 80rpx;
			height: 80rpx;
			display: block;
		}
	
		.tui-flex-box {
			width: 100%;
			display: flex;
			align-items: center;
		}
	
		.tui-icon-img {
			width: 48rpx;
			height: 48rpx;
			flex-shrink: 0;
		}
	
		.tui-logistics {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 24rpx 0 20rpx;
			box-sizing: border-box;
		}
	
		.tui-logistics-text {
			font-size: 26rpx;
			line-height: 32rpx;
		}
	
		.tui-logistics-time {
			font-size: 24rpx;
			line-height: 24rpx;
			padding-top: 16rpx;
			color: #666
		}
	    .yui-order-refund {
	    	margin-top: 20rpx;
	    	color: #f00
	    }
	    
	    .yui-order-now-refund {
	    	margin-top: 20rpx;
	    	color: #ff7b0f
	    }
		.tui-addr {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 20rpx;
			box-sizing: border-box;
		}
	
		.tui-addr-userinfo {
			font-size: 30rpx;
			line-height: 30rpx;
			font-weight: bold;
		}
	
		.tui-addr-text {
			font-size: 24rpx;
			line-height: 32rpx;
			padding-top: 16rpx;
		}
	
		.tui-addr-tel {
			padding-left: 40rpx;
		}
	
		.tui-order-item {
			margin-top: 20rpx;
			border-radius: 10rpx;
			margin:20rpx;
			overflow: hidden;
		}
	
		.tui-goods-title {
			width: 100%;
			font-size: 28rpx;
			line-height: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	
	
		.tui-goods-item {
			width: 100%;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
		}
	
		.tui-goods-img {
			width: 180rpx;
			height: 180rpx;
			display: block;
			flex-shrink: 0;
		}
	
		.tui-goods-center {
			flex: 1;
			padding: 20rpx 8rpx;
			box-sizing: border-box;
		}
	
		.tui-goods-name {
			max-width: 310rpx;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			font-size: 26rpx;
			line-height: 32rpx;
		}
	
		.tui-goods-attr {
			font-size: 22rpx;
			color: #888888;
			line-height: 32rpx;
			padding-top: 20rpx;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
	
		.tui-price-right {
			text-align: right;
			font-size: 24rpx;
			color: #888888;
			line-height: 30rpx;
			padding-top: 20rpx;
		}
	
		.tui-color-red {
			color: #E41F19;
			padding-right: 30rpx;
		}
	
		.tui-goods-price {
			width: 100%;
			display: flex;
			align-items: flex-end;
			justify-content: flex-end;
			font-size: 24rpx;
		}
	
		.tui-size-24 {
			font-size: 24rpx;
			line-height: 24rpx;
		}
	
		.tui-price-large {
			font-size: 32rpx;
			line-height: 30rpx;
		}
	
		.tui-goods-info {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background: #212a36;
		}
	
		.tui-price-flex {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	
		.tui-size24 {
			padding-bottom: 20rpx;
			font-size: 24rpx;
			line-height: 24rpx;
			color: #888;
		}
	
		.tui-size32 {
			font-size: 32rpx;
			line-height: 32rpx;
			font-weight: 500;
		}
	
		.tui-pbtm20 {
			padding-bottom: 20rpx;
		}
	
		.tui-flex-shrink {
			flex-shrink: 0;
			color:#666;
			font-size: 26rpx;
		}
	
		.tui-primary-color {
			color: #e1b01a;
		}
	
		.tui-order-info {
			margin-top: 20rpx;
			margin:0 20rpx;
			border-radius: 20rpx;
		}
	
		.tui-order-title {
			position: relative;
			font-size: 28rpx;
			line-height: 28rpx;
			padding-left: 12rpx;
			box-sizing: border-box;
		}
	
		.tui-order-title::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			border-left: 4rpx solid #e1b01a;
			height: 100%;
		}
	
		.tui-order-content {
			width: 100%;
			padding: 24rpx 30rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			
			background:#212a36;
			font-size: 24rpx;
			line-height: 30rpx;
		}
	
		.tui-order-flex {
			display: flex;
			padding-top: 18rpx;
		}
	
		.tui-order-flex:first-child {
			padding-top: 0
		}
	
		.tui-item-title {
			color:#666;
			width: 132rpx;
			flex-shrink: 0;
		}
	
		.tui-item-content {
			color: #666;
			line-height: 32rpx;
		}
	
		.tui-safe-area {
			height: 1rpx;
			padding-bottom: env(safe-area-inset-bottom);
		}
	
		.tui-tabbar {
			// width: 100%;
			margin:0 20rpx;
			height: 98rpx;
			// background: #fff;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 26rpx;
			box-shadow: 0 0 1px rgba(0, 0, 0, .3);
			padding-bottom: env(safe-area-inset-bottom);
			
		}
	
		.tui-btn-mr {
			margin-right: 30rpx;
		}
    .tui-boxs{
    	margin:0rpx;
    	font-size: 26rpx !important;
    	width:auto !important;
    	background: #212a36 !important;
    	color:#fff !important;
    	font-size: 24rpx !important;
    }
	.bottom {

		display: flex;
		flex: 1;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background-color: #0c0d13;
	}

	.golden-title {

		color: #f4d56f;
		font-family: Barlow Semi Condensed;
		font-weight: 500;
		line-height: 56rpx;
		text-shadow: 0 4rpx 8rpx rgba(3, 3, 3, .5);
		width: 750rpx;
		text-align: center;
		font-style: italic;

	}
     .tui-order-list {
     	margin-top: 80rpx;
		margin:0rpx 20rpx;
     }
     
   
     
     .tui-goods-title {
     	width: 100%;
     	font-size: 28rpx;
     	display: flex;
     	align-items: center;
     	justify-content: space-between;
     }
     .yui-names{color:#e1b01a}
     .tui-order-status {
     	color: #888;
     	font-size: 26rpx;
     }
     
     .tui-goods-item {
     	width: 100%;
     	padding: 20rpx 30rpx;
     	box-sizing: border-box;
     	display: flex;
     	justify-content: space-between;
     }
     
     .tui-goods-img {
     	width: 180rpx;
     	height: 180rpx;
     	display: block;
     	flex-shrink: 0;
     }
     
     .tui-goods-center {
     	flex: 1;
     	padding: 20rpx 8rpx;
     	box-sizing: border-box;
     }
     
     .tui-goods-name {
     	max-width: 310rpx;
     	word-break: break-all;
     	overflow: hidden;
     	text-overflow: ellipsis;
     	display: -webkit-box;
     	-webkit-box-orient: vertical;
     	-webkit-line-clamp: 2;
     	font-size: 26rpx;
     	line-height: 32rpx;
     }
     
     .tui-goods-attr {
     	font-size: 22rpx;
     	color: #888888;
     	line-height: 32rpx;
     	padding-top: 20rpx;
     	word-break: break-all;
     	overflow: hidden;
     	text-overflow: ellipsis;
     	display: -webkit-box;
     	-webkit-box-orient: vertical;
     	-webkit-line-clamp: 2;
     }
     
     .tui-price-right {
     	text-align: right;
     	font-size: 24rpx;
     	color: #888888;
     	line-height: 30rpx;
     	padding-top: 20rpx;
     }
     
     .tui-color-red {
     	color: #e4b714;
     	padding-right: 30rpx;
     }
     
     .tui-goods-price {
     	width: 100%;
     	display: flex;
     	align-items: flex-end;
     	justify-content: flex-end;
     	font-size: 24rpx;
     }
     
     .tui-size-24 {
     	font-size: 24rpx;
     	line-height: 24rpx;
     }
     
     .tui-price-large {
     	font-size: 32rpx;
     	line-height: 30rpx;
     	font-weight: 500;
     }
     
     .tui-order-btn {
     	// width: 100%;
     	display: flex;
     	align-items: center;
     	justify-content: flex-end;
     	background: #212a36;
		margin-top: 10rpx;
		border-radius: 10rpx;
     	padding: 10rpx 30rpx 20rpx;
     	box-sizing: border-box;
     }
     
     .tui-btn-ml {
     	margin-left: 20rpx;
     }
	.golden-title text {
		justify-content: center;
		margin-top: 2rpx;
		font-size: 48rpx
	}

	/* 商品列表*/

	.tui-product-list {
		margin: 20rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* padding: 10rpx 0rpx; */
	}


	.tui-product-container {
		width: 49%;
		/* 	display: flex;
    	justify-content: space-between;
    	flex-wrap: wrap;
    	flex: 1; */
		margin-right: 2%;
	}

	.yui-pricebox {
		font-size: 26rpx;
		margin-left: 4rpx;
		margin-top: 4rpx;
	}

	.tui-product-container:nth-child(2n) {
		margin-right: 0;
	}


	.tui-pro-item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #212a36;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
		transition: all 0.15s ease-in-out;
	}

	.tui-flex-list {
		display: flex;
		margin-bottom: 1rpx !important;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-proimg-list {
		width: 260rpx;
		height: 260rpx !important;
		flex-shrink: 0;
		border-radius: 12rpx;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #777777;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 18rpx;
		display: flex;
	}

	.tui-sale-price {
		display: flex;
		font-size: 30rpx;
		font-weight: 500;
		color: #f4d56f;
	}

	.tui-sale-prices {
		font-size: 28rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}

	.affiliate_page .top_link.right .link_btn_img_box {
		width: 70rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		border: solid 2rpx rgba(244, 213, 111, .7);
		background-color: rgba(37, 31, 20, .5);
	}

	.affiliate_page .top_link.right .link_btn_img_box_active {
		width: 68rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		border: solid 2rpx rgba(255, 255, 255, .7);
		background-color: #251f14;
	}

	.affiliate_page .top_link.right .link_btn_img_box_active image {
		width: 70%;
		height: 100%;
	}

	.affiliate_page .top_link.right .link_btn_img_box image {
		width: 70%;
		height: 100%;
	}

	image {
		overflow-clip-margin: content-box;
		overflow: clip;
	}

	.buy {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: row;

	}

	.button_buy {
		background-color: #f4d56f;
		width: 200rpx;
	}
</style>